<template>
  <div class="container">
    <div class="close">
      <close></close>
    </div>
    <div class="content">
      <h1 style="font-size: 20px;font-weight: bolder;margin-bottom: 40px">设置</h1>
      <ul class="container-base">
        <li>
          <span class="base-title">通用</span>
          <ul class="container-item">
            <li>
              界面主题
            </li>
            <li>
              界面主题
            </li>
          </ul>
        </li>

        <li>
          <span>通用</span>
          <ul class="container-item">
            <li>
              界面主题
            </li>
            <li>
              界面主题
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>

import close from "@/components/common/close/index.vue"


</script>

<style scoped>
.close {
  position: absolute;
  right: 20px;
  top: 10px;
}

.base-title {
  margin-bottom: 20px;
}

.container-item li:hover {
  background-color: var(--item-active-background);
}

.container-item li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 20px;
  cursor: pointer;
}

.container-item {
  margin-top: 10px;
  background-color: var(--item-background);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  overflow: hidden;
}
.container-base>li {
  margin-bottom: 20px;
}

.container-base{
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.content {
  height: 100%;
  width: 100%;
  max-width: 650px;
  box-sizing: border-box;
  padding-top: 80px;
}

</style>
